<template>
  <page-view>
    <div class="page">
      <div
          class="column"
          ref="column"
          v-for="(items, index) in columnList"
          :key="index"
      >
        <!--  瀑布流某一列下的数据      -->
        <div class="column-item" v-for="(item, i) in items" @click="itemClicked(item)">
          <img class="img"  :key="i" :src="item.image" />
          <div class="goods-info">
            <div class="item-name">{{item.name}}</div>
            <div class="unit-name">规格：{{item.unit}}</div>
            <div class="unit-name">销量：{{item.saleNum}}</div>
          </div>
        </div>
      </div>
    </div>
    <el-carousel :initial-index="0" :autoplay="false" ref="myCarousel">
      <el-carousel-item :key="0">第一个轮播项目</el-carousel-item>
      <el-carousel-item :key="1">第二个轮播项目</el-carousel-item>
      <el-carousel-item :key="2">第三个轮播项目</el-carousel-item>
    </el-carousel>
    <el-button @click="changeIndex">更换轮播项</el-button>
  </page-view>
</template>

<script>
// 动态控制几列瀑布流
import { isMobileV2 } from '@/utils/util'
import { ref } from 'vue'
export default {
  name: "app-water-flow-dynamic-v2",
  components:{},
  setup() {
    let myCarousel = ref(null)
    let showIndex = ref(0)
    const changeIndex = () => {
      showIndex.value = 2
      console.log('222')
      if (myCarousel.value) {
        // 幻灯片更改索引
        myCarousel.value.setActiveItem(showIndex.value)
      }
    }
    return {
      myCarousel,
      showIndex,
      changeIndex
    }
  },
  data() {
    return {
      // 所有图片
      imgList: [
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img0.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://img1.baidu.com/it/u=3866290852,3566512524&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
        "https://img2.baidu.com/it/u=1114729443,1120710416&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500",
        "https://img0.baidu.com/it/u=1345303087,1528317222&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082",
        "https://img2.baidu.com/it/u=1893470775,4143435497&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
        "https://img2.baidu.com/it/u=1088754973,1390499664&fm=253&fmt=auto&app=138&f=JPEG?w=335&h=500",
        "https://t7.baidu.com/it/u=1415984692,3889465312&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=334080491,3307726294&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=3713375227,571533122&fm=193&f=GIF",
        "https://t7.baidu.com/it/u=2235903830,1856743055&fm=193&f=GIF",
        'https://t7.baidu.com/it/u=1635608122,693552335&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=1856946436,1599379154&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=813347183,2158335217&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=2084624597,235761712&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=3337661019,3898256580&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=1723458001,3671360301&fm=193&f=GIF',
        'https://t7.baidu.com/it/u=2359570649,2574326109&fm=193&f=GIF'
      ],

      // 动态控制几列
      columnList: [],
      // 列宽度
      columnWidth: 0,
      // 瀑布流多少列
      columnCount:4,
    }
  },
  created() {
    // 瀑布流多少列
    this.columnCount = isMobileV2() ? 2 : 4

    // 初始化数据
    for (let i = 0; i < this.columnCount; i++) {
      // 生成每列图片数组
      this.columnList.push([]);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setWaterFallLayout()
    })
  },
  methods:{
    // 瀑布布局 - 动态几列瀑布流
    async setWaterFallLayout() {

      let idx = 0
      for (let item of this.imgList) {
        let img = new Image()
        img.src = item
        try {
          let imageH = await this.getImgHeight(img)
          // 每列高度数组:有几列该数组就有几个元素 但是并不代表最矮的就在前面 只是有四列高度累积值
          let columnHeights = this.$refs.column.map((item) => item.clientHeight);
          console.log('columnHeight:', columnHeights)
          // 找出最小高度值
          let min = Math.min(...columnHeights);
          // 找出最小高度列的索引
          let index = columnHeights.findIndex((item) => item === min);
          console.log('index:', index)

          let obj = {
            image:item,
            index:idx,
            name:'广式风味腊肠好吃没得谈广式风味腊肠好吃没得谈广式风味腊肠好吃没得谈',
            unit:'100g/包',
            saleNum:'1236456',
          }

          // 放入图片
          this.columnList[index].push(obj);
          // 关键点：等待渲染完成后重新比较高度
          await this.$nextTick();

          idx += 1
        } catch (e) {
          console.log('e:', e)
        }
      }
    },

    // 获取图片高度
    getImgHeight(img) {
      return new Promise((resolve,reject) => {
        // 图片加载完成
        img.onload = () => {
          // 计算图片渲染后高度
          let h = (img.height / img.width) * this.columnWidth;
          resolve(h);
        };
        // 加载出错
        img.onerror=()=>{
          reject('error')
        }
      });
    },

    itemClicked(item) {
      let index = item.index
      this.$message.info('当前点击' + index + '个')
    },

    setActiveItem() {
      this.$refs.myCarousel.setActiveItem(2)
    }
  }
}
</script>

<style scoped>
.page {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: 10px 0 0 10px;
  box-sizing: border-box;
  background-color: #f8f8f8;
}

.column {
  flex: 1;
  padding: 0 10px 0 0;
  box-sizing: border-box;
  width: 0;
}

.column-item {
  width: 100%;
  background-color: white;
  margin-bottom: 10px;
  border-radius: 10px;
  /*有边框宽度的 这个很重要*/
  box-sizing: border-box;

  /*使得放大效果更加平滑*/
  transition: transform 0.3s ease-in-out;
}

.column-item:hover {
  /*鼠标放上去 有放大效果*/
  transform: scale(1.02, 1.02);
}

.img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.goods-info {
  padding: 0 10px 10px;
  /*有边框宽度的 这个很重要*/
  box-sizing: border-box;
}

.item-name {
  font-size: 16px;
  margin-bottom: 10px;
}

.unit-name {
  font-size: 14px;
  color: #999999;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

</style>
